<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>SVG简易编辑器</title>
    <style>
        #toolbox {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 250px;
            border-right: 1px solid #CCC;
        }

        #toolbox h2 {
            margin: 0;
            padding: 0;
            background: #EEE;
            font-size: 16px;
            height: 24px;
            line-height: 24px;
            padding: 5px 10px;
        }

        #toolbox form {
            padding: 10px;
        }

        #canvas {
            position: absolute;
            left: 260px;
            top: 10px;
            bottom: 10px;
            right: 10px;
            box-shadow: 2px 2px 10px rgba(0,0,0,.4);
            border-radius: 5px;
        }

        label {
            display: inline-block;
            width: 80px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="toolbox">
        <h2>创建</h2>
        <form id="create-shape">
            <button type="button" create="rect">Rect</button>
            <button type="button" create="circle">Circle</button>
            <button type="button" create="ellipse">Ellipse</button>
            <button type="button" create="line">Line</button>
        </form>
        <h2>形状</h2>
        <form id="shape-attrs">
            请先创建图形
        </form>
        <h2>外观和变换</h2>
        <form id="look-and-transform" disabled="disabled">
            <p>
                <label style="display: inline;">填充</label>
                <input id="fill" type="color" value="#ffffff" />
            </p>
            <p>
                <label style="display: inline;">描边</label>
                <input id="stroke" type="color" value="#ff0000" />
                <input id="strokeWidth" type="range" value="1" />
            </p>
            <p>
                <label>translateX</label>
                <input id="translateX" type="range" min="-400" max="400" value="0" />

                <label>translateY</label>
                <input id="translateY" type="range" min="-400" max="400" value="0" />

                <label>rotate</label>
                <input id="rotate" type="range" min="-180" max="180" value="0" />

                <label>scale</label>
                <input id="scale" type="range" min="-1" max="2" step="0.01" value="1" />
            </p>
        </form>
    </div>
    <div id="canvas"></div>
</body>
<script src="/javascripts/application.js" type="text/javascript" charset="utf-8" async defer>
	var SVG_NS="http://www.w3.org/2000/svg";

	var shapeInfo={
		react:"x:10,y:10,width:200,height:100,rx=0,ry=0",
		circle:"cx:200,cy:200,r:50",
		ellipse:"cx:200,cy:200,rx:80,ry:30",
		line:"x1:10,y1:10,x2:100,y2:100"
	};

	var defaultAttrs={
		fill:'#fff',
		stroke:"#f00"
	};

	var createForm=document.getElementById("create-shape");
	var attrForm=document.getElementById("shape-attrs");
	var lookForm=document.getElementById("look-and-transform");

	function createSVG(){
		var svg=document.createElementNS(SVG_NS,'svg');
		svg.setAttribute("width",'100%');
		svg.setAttribute("height","100%");

		canvas.appendChild(svg);

		svg.addEventListener("click",function(){

		});

		return svg;
	}

	funnction

	var svg=createSVG();

</script>
</html>